<template>

  <view class="custom_plane" :style="'width:'+wid+'px;'  + 'height:'+wh+'px;'+'margin-top:'+(-mth)+'px' ">
    <view class=" custom_plane_title" style="padding-top: 5%">

      <view style="display: flex;" class="">
        <image style="width: 30px;height: 30px;padding-top: 8px;padding-left: 8px;" src="@/static/logo_ruiji.png"
          mode=""></image>
        <!-- 营业中-->
        <view class="" style="padding-left: 10px;">
          <view class="" style="display: flex;">
            <h1 style="font-size: 16px;padding-right: 10px;">褚云宸餐厅</h1>
            <div>
              <span v-if="status===1" style="background-color: #00aa00;color: white;font-size: 12px;">营业中</span>
              <span v-else style="background-color: rgb(26, 23, 23);font-size: 12px;color: #ccc;">打烊中</span>
            </div>
          </view>

          <!-- 下面 -->
          <view class="">
            <span style="font-size: 12px;padding-right: 8px;">
              <image style="width: 12px;height: 12px;padding-right: 3px;" src="../../static/length.png" mode="">
              </image> 距离1.5km
            </span>
            <span style="font-size: 12px;padding-right: 8px;">
              <image style="width: 12px;height: 12px;padding-right: 3px;" src="../../static/time.png" mode=""></image>
              配送费6元
            </span>

            <span style="font-size: 12px;padding-right: 8px;">
              <image style="width: 12px;height: 12px;padding-right: 3px;" src="../../static/time.png" mode=""></image>
              预计时长12min
            </span>
          </view>
        </view>
      </view>
    </view>

    <!-- 下面部分-->
    <view class="" style="padding-bottom: 20px;">
      <view class="" style="display: flex;margin-top: 20px;padding-left: 10px;">
        <view class="">
          <span style="font-size: 12px;color:#757575;">雷雷餐厅为顾客打造专业的大众文化美食外送餐饮</span>
          <div style="margin-left: -3px;padding-top: 5px;">
            <uni-icons type="location-filled" size="12"></uni-icons>
            <span style="font-size: 12px;color:#757575;">湖北省武汉市烽胜路波光霞影B区</span>
          </div>
        </view>
        <div style="margin-left: 10%;margin-top: 15px;">
          <uni-icons @click="open" type="phone-filled" size="30px"></uni-icons>
        </div>

      </view>
    </view>
  </view>








</template>

<script>
  import {
    querystatus
  } from '@/api/login.js'

  export default {
    name: "my-plane",
    data() {
      return {
        status: '',
        wid: 0,
        wh: 150,
        mth: 100,
        message: false
      };
    },
    created() {
      const sysInfo = uni.getWindowInfo();
      this.wid = sysInfo.windowWidth - 20
      this.getShopStatus()
    },
    methods: {
      //获取店铺状态
      async getShopStatus() {
        const res = await querystatus()

        this.status = res.data
      },
      //打开电话弹窗
      open() {

        this.$emit('open');
        //  this.$refs.popup.open('bottom')
      },


    }
  }
</script>

<style lang="scss">
  .custom_plane {
    z-index: 999;
    position: absolute;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 10px 0 rgba(138, 138, 138, 0.5);
    margin-left: 2.6%;
    border-radius: 5px;

  }
</style>